<script setup lang="ts">
import type { TestDetail, TestResult } from '@/types/healthTest'
import { onMounted, ref } from 'vue'

// 获取页面参数
const query = defineProps<{
  testResultTitle: string,
  testResult: string
}>()

// 创建响应式变量来保存数据
const savedTestResultTitle = ref('')
const savedTestResult = ref('')

const select = async () => {
  // 如果有新的测试结果，则更新保存的数据
  if (query.testResult) {
    savedTestResult.value = query.testResult
    uni.setStorageSync('testResult', query.testResult)
  } else {
    // 如果没有新数据，尝试从本地存储获取
    const storedResult = uni.getStorageSync('testResult')
    if (storedResult) {
      savedTestResult.value = storedResult
    }
  }

  // 如果有新的测试结果标题，则更新保存的数据
  if (query.testResultTitle) {
    savedTestResultTitle.value = query.testResultTitle
    uni.setStorageSync('testResultTitle', query.testResultTitle)
  } else {
    // 如果没有新数据，尝试从本地存储获取
    const storedTitle = uni.getStorageSync('testResultTitle')
    if (storedTitle) {
      savedTestResultTitle.value = storedTitle
    }
  }

  console.log('当前测试结果:', savedTestResult.value)
}

// 查看历史记录
const viewHistory = () => {
  uni.navigateTo({
    url: '/pages/health/componets/TestHistory'
  })
}

onMounted(select)
</script>

<template>
  <view class="box">
    <text class="title">
      你的抑郁测试结果为
    </text>
    <view class="show">
      <view class="result">{{ savedTestResultTitle || query.testResultTitle }}</view>
      <view class="container">{{ savedTestResult || query.testResult }}</view>
    </view>
    <view class="buttons">
      <view class="history" @tap="viewHistory">查看历史记录</view>
      <view class="return">
        <navigator
          hover-class="none"
          class="button navigator"
          url="/pages/index/index"
          open-type="switchTab"
        >
          返回首页
        </navigator>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #472ec7;
  background-image: url('@/static/images/结果图片.jpg');
  text-align: center;
  background-size: cover;

  .buttons {
    display: flex;
    justify-content: center;
    gap: 20rpx;
    margin-top: 30rpx;

    .history,
    .return {
      width: 200rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 15px;
      color: #fff;
    }

    .history {
      background-color: #4a90e2;
    }

    .return {
      background-color: rgb(240, 107, 30);
    }
  }

  .title {
    height: 180rpx;
    line-height: 180rpx;
    color: #a73951;
    font-size: 35rpx;
  }

  .show {
    margin: 0 30rpx;
    background: #c7c6c6;
    border-top-left-radius: 25rpx;
    border-top-right-radius: 25rpx;
    padding: 25rpx 0;
    
    .result {
      color: rgb(195, 14, 14);
      font-size: 40rpx;
      height: 120rpx;
      line-height: 120rpx;
      font-weight: 400;
      opacity: 0.8; /* 设置透明度为50% */
    }

    .container {
      text-indent: 2em;
      margin: 20rpx;
      padding: 10rpx;
      line-height: 60rpx;
      font-size: 28rpx;
      background-color: #d4dae1;
      text-align: left;
      border-radius: 20rpx;
      opacity: 1; /* 设置透明度为50% */
    }
  }
}
</style>